<template>
  <el-row :gutter="0">
    <el-col :span="24" :offset="0">
      <div
        @click="backToTop"
        class="scoll-button"
        :style="{ display: $props.action ? 'block' : 'none' }"
      ></div>
    </el-col>
  </el-row>
</template>

<script setup lang="ts">
  interface IAction {
    action: boolean;
  }
  const $props = withDefaults(defineProps<IAction>(), { action: false });

  // 返回到顶部
  const backToTop = () => {
    window.scrollTo({
      top: 0,
      left: 0,
      behavior: "smooth",
    });
  };
</script>

<style type="text/css" scoped>
  .scoll-button {
    width: 42px;
    height: 62px;
    background-image: url(https://cdn.cnbj1.fds.api.mi-img.com/staticsfile/visual/top-icon.png);
    background-size: 100% 100%;
    background-position: 50%;
    position: fixed;
    left: calc(50% + 613px);
    bottom: 50px;
    transform: translateX(-100%);
    z-index: 100;
    cursor: pointer;
  }
</style>
